
/*  layout for renderingtype "SizeComparison"
--------------------------------------------------- */
.largeBox {
  display:inline-block;
}

.topBox {
  margin-bottom:50px;
}

.endBox {
  display:inline-block;
  width:100px;
  height:100px;
  font-size:0.4em;
}

.endBox > div {
  display:table-cell;
  width:100px;
  height:100px;
  vertical-align:middle;
}

.sizeBox {
  display:inline-block;
  width:100px;
  height:100px;
  border:2px solid gray;
  border-radius: 0.3em;
}

.filled {
  border-radius: 0.6em;
  background: #fefcea; /* Old browsers */
  background: -moz-linear-gradient(top, #fefcea 0%, #f1da36 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefcea), color-stop(100%,#f1da36)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* IE10+ */
  background: linear-gradient(to bottom, #fefcea 0%,#f1da36 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 ); /* IE6-9 */
}

.sizeBox > div {
  display:table-cell;
  width:100px;
  height:100px;
  vertical-align:middle;
  font-size:0.5em;
}

[draggable] {
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  cursor:move;
}

.sizeBox > div > div {
  padding:0;
}

.buttonRight {
  display:inline-block;
  top:-130px;
  position:relative;
}

.buttonRight > button {
  font-size:45px;
  margin-left:20px !important;
}

/* sizeComparison with 1 operator */
#sizeComparison[data-nmrofops="1"] {
  font-size: 4em;
}
#sizeComparison span.operator {
  margin-left: 0.4em;
  margin-right: 0.4em;
}